<template>
  <t-modal
    title="评价交流"
    width="1100px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="feedBackModal-container"
    v-bind="footer"
    forceRender
  >
    <div class="curve-modal-body">
      <div class="feed-container">
        <a-avatar :size="40" slot="avatar" icon="user" />
        <div class="mentions">
          <div class="arrow"></div>
          <a-mentions
            rows="2"
            placeholder="意见反馈..."
            v-model="form.feedbackComment"
          >
          </a-mentions>
          <div class="operate-container">
            <div
              class="et"
              @click="handelAddUser()"
              :class="[isActive && 'active']"
            >
              @
            </div>
            <div class="release">
              <div class="void" @click="handelVoid()">取消</div>
              <a-button type="primary" @click="handelRelease()">
                发布
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <div class="reply-container">
        <div class="title">意见反馈（{{ dataSoucre.length }}）</div>
        <a-divider />
        <a-empty v-if="dataSoucre.length == 0" :description="false" />
        <div class="reply-item" v-for="item in dataSoucre" :key="item.uuid">
          <a-avatar :size="40" slot="avatar" src="" icon="user" />
          <div class="comment-basic">
            <div class="base-header">
              <div class="name">{{ item.creator }}</div>
              <div class="date-time">{{ item.createTime }}</div>
            </div>
            <div class="content">
              {{ item.noticeUserNames }}
              {{ item.feedbackComment }}
            </div>
            <div class="del" id="delete-container">
              <a-popconfirm
                :getPopupContainer="getContainer"
                title="确定删除该数据吗?删除之后不可恢复!"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handelDelete(item)"
              >
                <a-icon type="delete" />删除
              </a-popconfirm>
            </div>
            <a-divider />
          </div>
        </div>
      </div>
    </div>
    <!-- 新增用户 -->
    <personnel-popup
      ref="PersonnelPopup"
      :multiple="true"
      :whetherShow="false"
      @change="getNewUser"
      @close="handelpersonnelClose()"
      :url="
        '/probusiness/bimMarkMain/getTreeOrganizationAndUserDataByOrgCode?orgCode=' +
          $parent.conditionsData.proCode
      "
    />
  </t-modal>
</template>

<script>
import { PersonnelPopup } from "@/components";
import { feedBackList, addFeedBack, delFeedBack } from "@/api/safetyManage";
export default {
  components: {
    PersonnelPopup,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Object,
      default() {
        return { footer: null };
      },
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      dataSoucre: [],
      form: {
        feedbackComment: "",
        userIds: "",
      },
      isActive: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    getContainer() {
      return document.getElementById("delete-container");
    },
    getData() {
      return new Promise((resolve, reject) => {
        let { proCode } = this.$parent.conditionsData;
        feedBackList({ proCode })
          .then((res) => {
            this.dataSoucre = res ?? [];
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = [];
            reject();
          });
      });
    },
    handelpersonnelClose() {
      this.isActive = false;
    },
    //选择人员
    handelAddUser() {
      this.isActive = true;
      this.$refs.PersonnelPopup.openModal();
    },

    getNewUser(ids, data = []) {
      this.isActive = false;
      this.form.userIds = ids;
      let userName = [];
      userName = data.map((v) => "@" + v.userNameAndId + " ");
      userName = userName.filter((v) => v).toString();
      if (this.form.feedbackComment.includes(userName)) {
        return;
      }
      this.form.feedbackComment = this.form.feedbackComment + userName;
    },
    //发布
    handelRelease() {
      let { proCode } = this.$parent.conditionsData;
      let { feedbackComment, userIds } = this.form;
      addFeedBack({
        proCode,
        feedbackComment,
        noticeUserIds: userIds,
      })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.resetForm();
            this.getData();
          } else {
            this.$message.error(res?.message ?? "操作失败");
          }
        })
        .catch((_) => {});
    },
    // 删除
    handelDelete(item) {
      delFeedBack({ uuid: item.uuid })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((_) => {});
    },
    // 取消
    handelVoid() {
      this.resetForm();
    },
    //重置表单
    resetForm() {
      this.form = {
        feedbackComment: "",
        userIds: "",
      };
    },

    //关闭
    closeModal() {
      this.$parent.getEvaluateData();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.feedBackModal-container {
  .curve-modal-body {
    height: 500px;
    padding: 0 86px;
    box-sizing: border-box;
    overflow: auto;
    .feed-container {
      height: 146px;
      background: #f7f7f7;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      padding: 24px;
      box-sizing: border-box;
      position: relative;
      .mentions {
        flex: 1;
        padding-left: 16px;
        .arrow {
          position: absolute;
          transform: rotate(45deg);
          width: 16px;
          height: 16px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          z-index: 22;
          top: 38px;
          left: 73px;
          border-top: 0;
          border-right: 0;
        }

        .ant-mentions:focus,
        .ant-mentions:hover {
          border-color: #d9d9d9;
        }
        .ant-mentions-focused {
          border-color: #d9d9d9;
          box-shadow: none;
        }
        .ant-mentions {
          textarea {
            background: #ffffff;
          }
        }

        .operate-container {
          margin-top: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .et {
            cursor: pointer;
            font-size: 20px;
            &.active {
              color: #1677ff;
            }
          }
          .release {
            display: flex;
            align-items: center;
            .void {
              cursor: pointer;
              margin-right: 40px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #8c8c8c;
              letter-spacing: 1px;
            }
          }
        }
      }
    }
    .reply-container {
      padding-top: 32px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      .title {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
      .ant-divider {
        margin: 16px 0;
      }

      .ant-empty {
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translateX(-50%);
      }
      .reply-item {
        display: flex;
        .comment-basic {
          padding-left: 16px;
          flex: 1;
          .base-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
            .name {
              font-size: 16px;
              color: #333333;
            }
            .date-time {
              font-size: 14px;
              color: #999999;
            }
          }
          .content {
            padding: 10px 0;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
          }
          .del {
            cursor: pointer;
            .anticon-delete {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
